<template>
	<view>
		<!-- <view class="positopbgc"></view> -->
		<u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween">
						<view class="flexleft" slot="left" @click="jumpurl('/pages_shouye/xuanzecs?type=1')"
							style="width: 33.33%;">
							<text class="xiaohui ershil xiankuan" style="max-width: 250rpx;width: auto;">{{areatext?areatext:citytext}}</text>
							<u-icon name="arrow-down-fill" color="#000" size="12"></u-icon>
						</view>
						<view class="" style="width: 33.33%;">
							<view class="sanshier zhonghei textcenter fonweight">喜嘟来商业联盟</view>
						</view>
						<view class="" style="width: 33.33%;"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding">
			<image class="beijt" src="../static/images/system/bjc.png" mode=""></image>
			<view class="flexbetween ssbox" style="background-color: #e4e4e4;">
				<view class="flexleft">
					<u-icon name="search" color="#999" size="20"></u-icon>
					<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords" confirm-type="search" @confirm="shangjialb(keywords)">
				</view>
				<view class="rightss" @click="shangjialb(keywords)">搜索</view>
			</view>
		</view>
		<u-swiper :list="list1" keyName="image_text" height="160" radius="0" circular @click="lbtclick($event,list1)"></u-swiper>
		<!-- <view class="mainpadding2">
			<view class="flexbetween margin_top">
				<view class="pmitp1" @click="jumper('/pages_shouye/pintuan')">
					<view class="sanshier zhonghei fonweight">拼团</view>
					<view class="strongtext margin_top1" style="color: #ED8778;">限时抢购</view>
				</view>
				<view class="pmitp2" @click="jumper('/pages_shouye/miaosha')">
					<view class="sanshier zhonghei fonweight">秒杀</view>
					<view class="strongtext margin_top1" style="color: #ED8778;">限时秒杀</view>
				</view>
			</view>
		</view> -->
		<view class="margin_top">
			<u-notice-bar :text="text1" bgColor="#e9e9e9" color="#333" direction="column" @click="enternews($event)"></u-notice-bar>
		</view>
		<view class="mainpadding">
			<view class="margin_top">
				<view class="flexleft">
					<view class="flexcolumn" style="width: 25%;" @click="jumper('/pages_wode/zaiweikf')">
						<image class="jgqimg" src="@/static/images/system/jgq1.png" mode=""></image>
						<view class="xiaohui margin_top2">消费攻略</view>
					</view>
					<view class="flexcolumn" style="width: 25%;" @click="jumper('/pages_wode/zaiweikf')">
						<image class="jgqimg" src="@/static/images/system/jgq2.png" mode=""></image>
						<view class="xiaohui margin_top2">上门服务</view>
					</view>
					<view class="flexcolumn" style="width: 25%;" @click="jumper('/pages_wode/zaiweikf')">
						<image class="jgqimg" src="@/static/images/system/jgq3.png" mode=""></image>
						<view class="xiaohui margin_top2">二手交易</view>
					</view>
					<view class="flexcolumn" style="width: 25%;" @click="jumper('/pages_wode/zaiweikf')">
						<image class="jgqimg" src="@/static/images/system/jgq4.png" mode=""></image>
						<view class="xiaohui margin_top2">招聘求职</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexbetween">
			<view class="flexleft">
				<view class="line margin_right"></view>
				<view class="titletext hei_text bold">商家列表</view>
			</view>
			<view class="flexright margin_right " @click="jumpsjlb('商家列表',1,'')">
				<view class="xiaohuang margin_right1 main_size">查看全部</view>
				<u-icon name="arrow-right" color="#ff9341" size="12"></u-icon>
			</view>
		</view>
		<view class="" style="background-color: #bbbbbb;padding-top: 30rpx;" v-if="list.total">
			<view class="mainpadding ffffff" :class="index==0?'':'margin_top'" v-for="(item,index) in list.data" :key="item.id"
				@click="jumpdetail('/pages_shouye/mendianxq?id=',item.id)">
				<view class="flexleft">
					<image class="listleftimg margin_right2 hearradius" :src="item.logo_text" mode=""></image>
					<view class="flexcolumnbet" style="height: 120rpx;">
						<view class="titletext hei_text bold">{{item.name}}</view>
						<view class="flexbetween">
							<view class="flexleft">
								<u-icon name="man-add" color="#ff9341" size="16"></u-icon>
								<view class="xiaohuang margin_right margin_left1 strongtext">粉丝{{item.gz_num}}个</view>
								<u-icon name="eye" color="#999" size="16"></u-icon>
								<view class="xiaohui margin_right margin_left1 strongtext">浏览{{item.view_num}}次</view>
							</view>
							<!-- <view class="xiaohong margin_right margin_left1 strongtext">折扣{{Number(item.score_rate)/100}}</view> -->
						</view>
						<view class="flexbetween">
							<view class="flexleft">
								<u-icon name="map" color="#ff9341" size="16"></u-icon>
								<view class="xiaohui margin_left1 main_size xiankuan" style="width: 300rpx;">
									{{item.address_detail}}</view>
							</view>
							<view class="xiaohuang main_size">{{returnKmUnit(Number(item.distance))}}</view>
						</view>
					</view>
				</view>
				
				<view class="flexleft flex_wrap">
					<view class="flexcenter margin_top" style="width: 33.33%;">
						<image class="listleftimg2 radius" :src="item.mtz_image_text" mode="">
						</image>
					</view>
					<view class="flexcenter margin_top" style="width: 33.33%;" v-if="hjzindex==0 || hjzindex==1" v-for="(hjz,hjzindex) in item.hjz_image_text">
						<image class="listleftimg2 radius" :src="hjz" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lat:"",
				lng:"",
				menutop: 0,
				text1: [],
				newsData: [],
				cityid:"",
				citytext:"",
				keywords:"",
				areatext:"",
				areaid:"",
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onLoad() {
			uni.$on("selectaddress",data=>{
				console.log("选择城市了啦啦啦啦啦？？？？？？？？",data);
				this.lat = data.latitude
				this.lng = data.longitude
				this.cityid = data.cityid
				this.citytext = data.citytext
				this.areatext = ""
				this.areaid = ""
				this.init()
			})
			uni.$on("selectareafn",data=>{
				console.log("选择区域了啦啦啦啦啦？？？？？？？？",data);
				this.areatext = data.areatext
				this.areaid = data.areaid
				this.init()
			})
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			this.getlocation()
			// #endif
			this.getbanner()
			this.getnews()
		},
		onUnload() {
			uni.$off("selectaddress")
			uni.$off("selectareafn")
		},
		methods: {
			jumpurl(url){
				uni.navigateTo({
					url
				})
			},
			shangjialb(val){
				uni.navigateTo({
					url:"/pages_shouye/shangjlb?keywords="+val
				})
			},
			getlocation() {
				let _this = this
				// uni.showLoading({
				// 	mask:true,
				// 	title:"请稍后"
				// })
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.hideLoading()
						console.log(res, "获取定位成功");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					uni.hideLoading()
					let data = {
						citytext:res.data.pinfo.name,
						latitude:this.lat,
						longitude:this.lng,
						cityid:res.data.pid,
					}
					this.citytext = res.data.pinfo.name
					this.cityid = res.data.pid
					this.areatext = res.data.name
					this.areaid = res.data.id
					let area = {
						areatext:res.data.name,
						areaid:res.data.id
					}
					uni.setStorageSync("storagecity", data)
					uni.setStorageSync("storagearea", area)
					this.init()
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/shopcl/shopIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat:this.lat,
					lng:this.lng,
					city_id:this.cityid,
					area_id:this.areaid,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			getnews() { //滚动消息
				httpRequest.request('/api/index/noticeIndex', 'GET', {
					ly:1,
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item => {
						arr.push(item.name)
					})
					this.text1 = arr
					this.newsData = res.data.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			enternews(index) {
				uni.navigateTo({
					url: "/pages_wode/gonggaoxq?type=2&id=" + this.newsData[index].id
				})
			},
			// 跳转联盟商城
			tzlmsc() {
				uni.switchTab({
					url: '/pages/lianmengsc'
				})
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			jumpdetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pmitp1 {
		width: 40.5%;
		padding: 24rpx 28rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240131/84209b572ec7a0326c284b587031ceaf.png');
	}

	.pmitp2 {
		width: 40.5%;
		padding: 24rpx 28rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240131/4eeb013ec48b27fb1f29f656b6246e39.png');
	}

	.beijt {
		width: 100%;
		height: 195rpx;
		position: absolute;
		top: -30rpx;
		left: 0;
	}

	.dingbu {
		padding: 0 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		// background-image: url('https://solarmini.yuntaiqi.com/uploads/20240116/93135388fbd8b94a0cbd2c5ffe367a0b.png');
	}

	.nav {
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 1000;
	}

	.jgqimg {
		width: 100rpx;
		height: 100rpx;
	}

	/deep/.u-sticky.data-v-c187ecf2 {
		z-index: 1 !important;
	}

	.positopbgc {
		height: 700rpx;
		width: 100%;
		background-image: url("https://solarmini.yuntaiqi.com/uploads/20240116/40bef5773149893a96c5181c20ced66a.png");
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
	}
</style>